<template>
  <div class="py-8">
    <!-- 基本信息区域 -->
    <div class="flex flex-col lg:flex-row gap-8">
      <!-- 封面图 -->
      <div class="flex-shrink-0">
        <div 
          class="relative group rounded-xl overflow-hidden shadow-2xl hover:scale-105 transition-transform cursor-pointer w-72 aspect-[2/3]"
          @click="goToPlayPage"
        >
          <img :src="movie.coverUrl" alt="电影封面" class="w-full h-full object-cover" />
          <div class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-normal bg-background-900/20 rounded-xl">
            <div class="glass rounded-full p-4">
              <svg class="w-12 h-12 text-text-primary" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24">
                <polygon points="9.5,7.5 16.5,12 9.5,16.5" fill="currentColor"/>
              </svg>
            </div>
          </div>
          <!-- 独家标签 -->
          <div class="absolute top-2 left-2 bg-warning text-text-inverse text-xs font-bold px-2 py-1 rounded-lg">
            独家
          </div>
        </div>
      </div>

      <!-- 信息内容 -->
      <div class="flex-1 flex flex-col gap-6">
        <!-- 标题和评分 -->
        <div class="flex flex-wrap items-start gap-4">
          <h1 class="text-4xl font-bold text-text-primary">{{ movie.title }}</h1>
          <div class="flex items-center gap-2">
            <span
              class="ai-badge"
              v-if="movie.isAi && showAiLabel"
              >AI生成</span
            >
            <span
              class="fictional-badge"
              >虚构电影</span
            >
          </div>
        </div>

        <!-- 评分和基本信息 -->
        <div class="flex flex-wrap items-center gap-6 text-text-secondary">
          <div class="flex items-center gap-2">
            <span class="text-warning font-bold text-3xl">{{ movie.rating }}</span>
            <span class="text-text-muted">/ 10</span>
          </div>
          <span class="text-text-muted">•</span>
          <span class="text-lg">{{ movie.year }}</span>
          <span class="text-text-muted">•</span>
          <span class="text-lg">{{ movie.duration }}</span>
          <span class="text-text-muted">•</span>
          <span class="text-lg">{{ movie.genres.join(' / ') }}</span>
        </div>

        <!-- 统计信息 -->
        <div class="flex flex-wrap items-center gap-8 text-base text-text-secondary">
          <div class="flex items-center gap-2">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path d="M10 12a2 2 0 100-4 2 2 0 000 4z" />
              <path
                fill-rule="evenodd"
                d="M.458 10C1.732 5.943 5.522 3 10 3s8.268 2.943 9.542 7c-1.274 4.057-5.064 7-9.542 7S1.732 14.057.458 10zM14 10a4 4 0 11-8 0 4 4 0 018 0z"
                clip-rule="evenodd"
              />
            </svg>
            <span class="font-medium">{{ formatNumber(movie.views) }} 次观看</span>
          </div>
          <div class="flex items-center gap-2">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path
                d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.43a2 2 0 001.106 1.79l.05.025A4 4 0 008.943 18h5.416a2 2 0 001.962-1.608l1.2-6A2 2 0 0015.56 8H12V4a2 2 0 00-2-2 1 1 0 00-1 1v.667a4 4 0 01-.8 2.4L6.8 7.933a4 4 0 00-.8 2.4z"
              />
            </svg>
            <span class="font-medium">{{ formatNumber(movie.likes) }} 点赞</span>
          </div>
          <div class="flex items-center gap-2">
            <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
              <path
                fill-rule="evenodd"
                d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zM6 10a4 4 0 118 0 4 4 0 01-8 0zm-2 4a5 5 0 00-4.546 2.916A5.986 5.986 0 0010 16a5.986 5.986 0 004.546-2.084A5 5 0 0010 11z"
                clip-rule="evenodd"
              />
            </svg>
            <span
              class="cursor-pointer hover:text-text-primary transition-colors font-medium"
              @click="goToUser(movie.uploader.id)"
            >
              {{ movie.uploader.name }}
            </span>
          </div>
        </div>

        <!-- 简介 -->
        <div>
          <p class="text-text-secondary leading-relaxed text-lg">{{ movie.description }}</p>
        </div>

        <!-- 标签 -->
        <div v-if="hasAnyTags">
          <div class="flex flex-wrap gap-3">
            <!-- 系统标签 -->
            <span
              v-for="genre in movie.genres"
              :key="`genre-${genre}`"
              class="glass text-text-primary px-4 py-2 rounded-full text-sm hover:bg-background-700/50 transition-colors cursor-pointer bg-primary/20"
            >
              {{ genre }}
            </span>
            <span
              v-if="movie.universe"
              class="glass text-text-primary px-4 py-2 rounded-full text-sm hover:bg-background-700/50 transition-colors cursor-pointer bg-secondary/20"
            >
              {{ movie.universe }}
            </span>
            <span
              v-if="movie.language"
              class="glass text-text-primary px-4 py-2 rounded-full text-sm hover:bg-background-700/50 transition-colors cursor-pointer bg-accent/20"
            >
              {{ movie.language }}
            </span>
            <span
              v-if="movie.country"
              class="glass text-text-primary px-4 py-2 rounded-full text-sm hover:bg-background-700/50 transition-colors cursor-pointer bg-warning/20"
            >
              {{ movie.country }}
            </span>
            <!-- 用户标签 -->
            <span
              v-for="tag in movie.tags"
              :key="`user-${tag}`"
              class="glass text-text-primary px-4 py-2 rounded-full text-sm hover:bg-background-700/50 transition-colors cursor-pointer"
            >
              {{ tag }}
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { MovieDetail } from '../../types/ui'
import { useUiStore } from '../../store/useUiStore'

const props = defineProps<{
  movie: MovieDetail
}>()

const router = useRouter()
const uiStore = useUiStore()
const showAiLabel = computed(() => uiStore.showAiLabel)

// 检查是否有任何标签
const hasAnyTags = computed(() => {
  return (
    (props.movie.genres && props.movie.genres.length > 0) ||
    props.movie.universe ||
    props.movie.language ||
    props.movie.country ||
    (props.movie.tags && props.movie.tags.length > 0)
  )
})

const formatNumber = (num: number): string => {
  if (num >= 1000000) {
    return (num / 1000000).toFixed(1) + 'M'
  } else if (num >= 1000) {
    return (num / 1000).toFixed(1) + 'K'
  }
  return num.toString()
}

const goToUser = (userId: string) => {
  router.push({ name: 'UserProfile', params: { id: userId } })
}

const goToPlayPage = () => {
  router.push({ name: 'MoviePlay', params: { id: props.movie.id } })
}
</script> 